<template>
	<view class="news_body">
		<view class="news_title">
			<p>&emsp;&emsp;&emsp;{{context.title}}</p>
		</view>
		<view class="news_data">
			<p>作者:{{context.source}}</p>
			<p>时间:{{context.ctime}}</p>
		</view>
		<view class="news_img" v-if="context.picUrl == ''?false:true">
			<img :src="context.picUrl" :alt="context.title">
		</view>
		<view class="news_context">
			<text space :user-select="true">{{' '}}{{' '}} {{context.description}}</text>
			<text :user-select="true">{{' '}}{{' '}} {{context.description}}</text>
			<text :user-select="true">{{' '}}{{' '}} {{context.description}}</text>
		</view>
		<view class="news_icons">
			<view v-for="(item,index) in iconType" :key=" item.id">
				<uni-icons @click="updateIconsFn(item.update,index) " :type=" item.update ?item.name2:item.name1"
					size="30"></uni-icons>
				<text>{{item.updateNum}}</text>
			</view>

		</view>
		<view class="news_words">
			<textarea v-model="news_input" placeholder-style="color:#d6d6d6" placeholder="请输入要留言的内容..." />
		</view>
		<view class="news_button">
			<button class="mini-btn" type="warn" size="mini" @click="addLiuyanban">留言</button>
		</view>
		<view class="news_liuyanban">
			<view class="user_liuyan" v-for="item in userInfo" :key="item.id">
				<view class="user_touxiang">
					<image :src="item.userTopUrl" alt="">
				</view>
				<view class="user_neirong">
					<view>
						<p>{{item.name}}</p>
						</br>
						<text>{{item.userText}}</text>
						<view class="userFrom">
							<text>{{item.userData}} - {{item.userFrom}}</text>
							<view class="">
								<uni-icons type="hand-up"></uni-icons>
								<uni-icons type="hand-down" style='margin-left: 5px;'></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newsContext",
		data() {
			return {
				context: {},
				news_input: '',
				userInfo: [{
						name: "刘小喵",
						userTopUrl: "https://c-ssl.dtstatic.com/uploads/blog/202103/31/20210331160001_9a852.thumb.1000_0.jpg",
						userText: "巴拉巴拉巴拉巴拉巴拉巴拉巴拉~",
						userData: '1小时前',
						userFrom: "河南",
						id: 1
					},
					{
						name: "moune~",
						userTopUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407083322_Vw8zW.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680481438&t=095602457b6b8937468229399d9add78",
						userText: "增加国防预算，加大高科技领域的投入。通过军工产业和高科技的支撑，一样可以替代房地产等传统行业，继续拉动经济增长。",
						id: 2,
						userData: '2小时前',
						userFrom: "香港",
					},
					{
						name: "北北睡不着",
						userTopUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F31%2F20200331000349_odinr.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680481309&t=7aef240a1f6f9fc32eae5ebd36c5ce99",
						userText: "热烈祝贺全国政协十三届三次会议圆满成功！坚持党的领导方针政策。",
						id: 3,
						userData: '3小时前',
						userFrom: "上海",
					},
				],
				iconType: [{
						update: false,
						name1: "hand-up",
						name2: "hand-up-filled",
						updateNum: 22,
						id: 1,
					},
					{
						update: false,
						name1: "hand-down",
						name2: "hand-down-filled",
						id: 2,
						updateNum: 3,
					},
					{
						update: false,
						name1: "heart",
						name2: "heart-filled",
						id: 3,
						updateNum: 6,
					},
				]
			};
		},
		onLoad(options) {
			const itemData = JSON.parse(decodeURIComponent(options.item))
			this.context = itemData
		},
		methods: {
			// 点击更新ICON图标
			updateIconsFn(boolean, index) {
				this.iconType.forEach((item, i) => {
					if (index == i) {
						item.update = !boolean
					}
				})
			},
			// 添加留言内容
			addLiuyanban() {
				this.userInfo.unshift({
					id: this.userInfo.length + 1,
					name: `游客-${this.userInfo.length+1}`,
					userTopUrl: "https://img0.baidu.com/it/u=2802250757,2271905634&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501",
					userText: this.news_input,
					userData: '刚刚',
					userFrom: "未知",

				})
				this.news_input = ""
			}
		}
	}
</script>

<style lang="less" scoped>
	.news_body {
		padding: 10px;
	}

	.news_title {
		font-size: 20px;
		font-weight: bold;
	}

	.news_data {
		font-size: 12px;
		color: #8b8b8b;
		margin: 10px 0;
	}

	.news_img {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
	}

	.news_context {
		margin: 10px 0;
		font-size: 16px;
	}

	.news_icons {
		margin-top: 30px;
		display: flex;
		justify-content: space-evenly;
		color: #8e8e8e;

		view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.news_words {
		display: flex;
		justify-content: center;
		margin-top: 20px;

		textarea {
			padding: 10px;
			height: 60px;
			border: 1px solid #d6d6d6;
		}
	}

	.news_button {
		margin-top: 15px;
		display: flex;
		justify-content: space-evenly;
	}

	.news_liuyanban {
		margin-top: 30px;
		padding: 8px 4px;
		width: 100%;
		height: 100%;
	}

	.user_liuyan {
		width: 100%;
		height: 100%;
		display: flex;
		// justify-content: space-between;
		margin-bottom: 10px;

		.user_touxiang {
			width: 30px;
			height: 30px;
			border-radius: 50%;

			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}

		.user_neirong {
			padding: 4px;
			flex: 1;

			p {
				color: #8e8e8e;
			}
		}
	}

	.userFrom {
		font-size: 12px;
		color: #b7b7b7;
		display: flex;
		justify-content: space-between;
	}
</style>
